<template>
  <div class="list">
    <div class="wrap header">
      <div class="item">字段</div>
      <div class="item">状态</div>
      <div class="item">列表显示</div>
      <div class="item">搜索</div>
      <div class="item">固定</div>
      <div class="item">显示权限</div>
      <div class="item">编辑权限</div>
    </div>
    <div class="wrap golbal">
      <div class="item ">全局操作</div>
      <div class="item ">
        <el-select size="mini" clearable style="width: 90px;" v-model="authFlag" placeholder="请选择">
          <el-option label="只读" value="2" />
          <el-option label="编辑" value="3" />
        </el-select>
        <el-button size="mini" @click="changeAllRole('authFlag')">应用</el-button>
      </div>
      <div class="item ">
        <el-select size="mini" clearable style="width: 90px;" v-model="showInList" placeholder="请选择">
          <!-- <el-option label="隐藏" value="1" /> -->
          <el-option label="显示" value="2" />
        </el-select>
        <el-button size="mini" @click="changeAllRole('showInList')">应用</el-button>
      </div>
      <div class="item ">-</div>
      <div class="item ">-</div>
      <div class="item ">
        <el-select  size="mini" clearable multiple
          style="opacity: 0.7; width: 300px;" v-model="showRole" placeholder="请选择">
          <el-option v-for="item in listRole" :key="item.roleKey" :label="item.roleName" :value="item.roleKey" />
        </el-select>
        <el-button size="mini" @click="changeAllRole('showRole')">应用</el-button>
      </div>
      <div class="item ">
        <el-select  size="mini" clearable multiple
          style="opacity: 0.7; width: 300px;" v-model="editRole" placeholder="请选择">
          <el-option v-for="item in listRole" :key="item.roleKey" :label="item.roleName" :value="item.roleKey" />
        </el-select>
        <el-button size="mini" @click="changeAllRole('editRole')">应用</el-button>
      </div>
    </div>
    <div v-if="list.length">
      <div v-dragging="{item:item, list:list}" v-for="item,index in list" :key="index" class="wrap">
        <div class="item">
          <div style="width: 100%;">
            {{item.columnTitle}}
          </div>
          <span style="color: #959595;font-size:12px;">
            {{item.formTitle.substring(0,item.formTitle.indexOf('('))}}
          </span>
        </div>
        <div class="item" :class="item.authFlag==='3'?'active':''">
          <el-select size="mini" clearable style="width:90px"
           v-model="item.authFlag" placeholder="-">
            <el-option label="只读" value="2" />
            <el-option label="编辑" value="3"/>
          </el-select>
        </div>
        <div class="item">
         <el-select v-show="item.authFlag" size="mini" clearable style="width: 90px;"
            v-model="item.showInList" placeholder="-">
            <!-- <el-option label="隐藏" value="1" /> -->
            <el-option label="显示" value="2" />
          </el-select>
        </div>
        <div class="item">
          <el-select size="mini" v-show="item.authFlag&&item.showInList=='2'"
          clearable style="width: 110px;" v-model="item.searchType" placeholder="-">
            <el-option v-for="item in searchTypes" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <el-select size="mini"  v-show="item.authFlag&&item.showInList=='2'" clearable style="width: 90px;"
           v-model="item.fixed" placeholder="-">
            <el-option v-for="item in fixeds" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <el-select v-show="item.authFlag=='2'||item.authFlag=='3'" size="mini" clearable multiple
            style="opacity: 0.7; width: 300px;" v-model="item.showRole" placeholder="-">
            <el-option v-for="item in listRole" :key="item.roleKey" :label="item.roleName" :value="item.roleKey" />
          </el-select>
        </div>
        <div class="item">
          <el-select v-show="item.authFlag=='2'||item.authFlag=='3'" size="mini" clearable multiple style="opacity: 0.7; width: 300px;"
            v-model="item.editRole" placeholder="-">
            <el-option v-for="item in listRole" :key="item.roleKey" :label="item.roleName" :value="item.roleKey" />
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'column',
    components: {},
    props: {
      listRole: {
        type: Array,
        defulat: () => []
      },
      formTitiles: {
        type: Object,
        defulat: () => {}
      },
      formKey: {
        type: String,
        defulat: ''
      },
      extraFormKeys: {
        type: Array,
        defulat: () => []
      },
      formColumns: {
        type: Object,
        defulat: () => {}
      },
      propList: {
        type: Array,
        defulat: () => []
      },
      searchTypes: {
        type: Array,
        defulat: () => []
      },
      viewType: {
        type: [Number, String],
        defulat: '1'
      },
    },
    watch: {
      formKey() {
        this.reset()
      },
      extraFormKeys: {
        handler(val) {
          this.reset()
        },
        deep: true,
        immediate: true
      },
      formColumns: {
        handler(val) {
          this.reset()
        },
        deep: true,
        immediate: true
      },
    },
    data() {
      return {
        authFlag: '',
        showInList: '',
        searchType: '',
        fixed: '',

        showRole: [],
        editRole: [],

        list: [],
        fixeds: [{
          label: '左侧',
          value: 'left'
        }, {
          label: '右侧',
          value: 'right'
        }]
      };
    },
    created() {
      setTimeout(() => {
        if (this.propList && this.propList.list) {
          this.reset()
        }
      }, 1000)
      // 拖拽事件
      this.$dragging.$on("dragged", (result) => {
        // 将排序后的结果重新赋值
        this.list = result.value.list;
      });
    },
    methods: {
      reset() {
        this.list =[]
        let keys = [this.formKey].concat(this.extraFormKeys),
          list = [],
          tempId = 0,
          sort = 999,
          roles = this.listRole.map(item => {
            return item.roleKey
          });
        this.showRole = roles
        this.editRole = roles
        keys.forEach(key => {
          if (this.formColumns[key]) {
            this.formColumns[key].forEach(item => {
              let obj = {
                formKey: key,
                formTitle: this.formTitiles[key],

                columnName: item.columnName,
                columnTitle: item.columnTitle,

                authFlag: '',
                showInList: '',
                searchType: '',
                fixed: '',

                tempId,
                sort,
                showRole: roles,
                editRole: roles
              }
              if (this.propList && this.propList.length) {
                this.propList.some(ite => {
                  if (ite.columnName == item.columnName) {
                    obj.sort = ite.sort
                    obj.authFlag = ite.authFlag=="2"||ite.authFlag=="3"?ite.authFlag:""
                    obj.showInList = ite.showInList=="2"?ite.showInList:""
                    obj.searchType = ite.searchType
                    obj.fixed = ite.fixed
                    obj.showRole = JSON.parse(JSON.stringify(ite.showRole || []))
                    obj.editRole = JSON.parse(JSON.stringify(ite.editRole || []))
                    return true
                  }
                });
              }
              list.push(obj)
              tempId++
              sort++
            })
          }
        })
        list.sort((a, b) => {
          return a.sort - b.sort
        })
        this.$nextTick(()=>{
          this.list = list
        })
      },
      changeByKey(key) {
        this.list = this.list.map(item => {
          item[key] = this[key]
          return item
        })
        this[key] = ''
      },
      changeAllRole(key) {
        this.list.forEach(item => {
          item[key] = this[key]
        })
      },
      submit() {
        let list = []
        this.list.forEach((temp, sort) => {
          let item = JSON.parse(JSON.stringify(temp))
          if (!item.authFlag) {
            item.authFlag="1"
            item.showInList = '1'
          }
          if (!item.showInList) {
            item.showInList = "1"
          }
          if (item.showInList=="1") {
            item.searchType = ''
            item.fixed = ''
          }
          item.sort = sort
          list.push(item)
        })
        console.log(this.list)
        this.$emit('setValue', {
          tabType: 'list',
          formData: list
        })
      },
    }
  };
</script>
<style lang='scss' scoped>
  .list {
    width: 1481px;
    border-left: 1px solid #ebedf0;
    border-top: 1px solid #ebedf0;
    ::v-deep .el-input__inner{
      border:0px !important;
    }
    ::v-deep .el-icon-arrow-up:before{
      opacity: 0;
    }
    .active{
     ::v-deep .el-input__inner{
        color:#409EFF;
      }
    }
    .header {
      background: #409EFF;
      color: #fff;
      .item{
        min-height: 30px !important;
      }
    }
    .golbal{
      background: #ebedf0;
      .item{
        border-color:#fff !important;
      }
    }
    .wrap {
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      align-items: center;
      .item {
        padding: 10px 0;
        min-height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        border-right: 1px solid #ebedf0;
        border-bottom: 1px solid #ebedf0;
      }
      .item:first-child {
        width: 120px;
      }

      .item:nth-child(2) {
        width: 160px;
      }

      .item:nth-child(3) {
        width: 160px;
      }

      .item:nth-child(4) {
        width: 160px;
      }

      .item:nth-child(5) {
        width: 120px;
      }

      .item:nth-child(6) {
        width: 380px;
      }

      .item:nth-child(7) {
        width: 380px;
      }
    }
  }
</style>
